<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>客户管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<%-- 搜索区域 --%>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="name" class="layui-input" placeholder="姓名" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" id="phone" class="layui-input" placeholder="电话" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">公司</label>
            <div class="layui-input-inline">
                <input type="text" id="company" class="layui-input" placeholder="公司" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-inline">
                <label class="layui-form-label">业务员</label>
                <div class="layui-input-inline">
                    <select id="userId">
                        <option value="">业务员</option>

                    </select>
                </div>
            </div>

        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" id="searchBtn">
                <i class="layui-icon layui-icon-search"></i>
                查询
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>

    </div>
</form>
<%-- 数据展示区域 --%>
<hr>
<table id="dataTable" lay-filter="dataTableFilter"></table>
<%-- 头工具栏 --%>
<script type="text/html" id="headerBtns">
    <button class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <c:if test="${user.role == 1}">
        <button class="layui-btn layui-btn-sm" lay-event="setSalesman">
            <i class="layui-icon layui-icon-set"></i>
            分配业务员
        </button>
    </c:if>
</script>
<%-- 行工具栏 --%>
<script type="text/html" id="rowBtns">
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">
        <i class="layui-icon layui-icon-refresh"></i>
        修改
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="layui-btn layui-btn-sm" lay-event="visit">
        <i class="layui-icon layui-icon-release"></i>
        拜访
    </button>
</script>
<%-- 编辑数据的模板 --%>
<script type="text/html" id="editTpl">
    <form class="layui-form layui-form-pane" lay-filter="editFormFilter" style="padding-top: 15px;padding-left: 15px">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="姓名" class="layui-input" lay-verify="required" lay-reqText="姓名不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" autocomplete="off" placeholder="电话" class="layui-input" lay-verify="required|phone" lay-reqText="电话不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司</label>
            <div class="layui-input-inline">
                <input type="text" name="company" autocomplete="off" placeholder="公司" class="layui-input" lay-verify="required" lay-reqText="公司不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline" style="width: 210px">
                <input type="radio" name="sex" title="男" value="1"  checked >
                <input type="radio" name="sex" title="女" value="2"   >
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-filter="subBtnFilter" lay-submit></button>
    </form>
</script>

<%-- 批量修改业务员的模板 --%>
<script type="text/html" id="allSalesmanTpl">
    <form class="layui-form layui-form-pane" lay-filter="editFormFilter" style="padding-top: 15px;padding-left: 15px">
        <div class="layui-form-item">
            <label class="layui-form-label">业务员</label>
            <div class="layui-input-inline">
                <select id="salesmanId" name="userId" lay-verify="required" lay-reqText="请选择业务员">
                    <option value="">业务员</option>
                </select>
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-filter="subBtnFilter" lay-submit></button>
    </form>
</script>

<%-- 拜访内容的模板 --%>
<script type="text/html" id="visitTpl">
    <form class="layui-form layui-form-pane" lay-filter="visitFormFilter" style="padding-top: 15px;padding-left: 15px">
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input type="hidden" name="id"  >
                <input type="text" name="name" autocomplete="off" placeholder="姓名" class="layui-input"  readonly >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访时间</label>
            <div class="layui-input-inline">
                <input type="text" name="visitTime" id="visitTime" autocomplete="off" placeholder="拜访时间" class="layui-input" lay-verify="required" lay-reqText="拜访时间不能为空" >
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="width: 300px">
            <label class="layui-form-label">拜访内容</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="descp" placeholder="拜访内容"></textarea>
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-filter="subBtnFilter" lay-submit></button>
    </form>
</script>


<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form','jquery','layer','table','laydate'],function (){
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let table = layui.table;
        let laydate = layui.laydate;
        let cxt = '${pageContext.request.contextPath}';// /cms

        //1. 渲染数据表格
        //1.1. 表格渲染的参数
        let tabOpt = {
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt+"/customer.do?service=page",//表格的数据接口
            page:true,//开启分页
            toolbar:"#headerBtns",
            cols:[[
                {type:"checkbox"},
                {field:"name",title:"姓名"},
                {field:"phone",title:"电话"},
                {field:"sex",title:"性别",templet:function (d) {
                        let sex = d.sex;
                        if(sex == 1){
                            return "<b style='color:red'>男</b>"
                        }else if(sex == 2){
                            return "<b style='color:green'>女</b>"
                        }

                    }},
                {field:"company",title:"公司"},

                {field:"deleted",title:"状态",templet:function (d) {
                        let deleted = d.deleted;
                        if(deleted == 1){
                            return "<b style='color:green'>有效</b>"
                        }else if(deleted == 2){
                            return "<b style='color:gray'>无效</b>"
                        }

                    }},
                {field:"realname",title:"业务员"},
                {field:"createTime",title:"创建时间"},
                {field:"deleteTime",title:"离职时间"},
                {title:"操作",toolbar:"#rowBtns",minWidth:260}
            ]],
            parseData:function (rs){
                /*
                *  layui的标准数据格式
                *  { code : 0,msg:"消息",total:1000,data:[]}
                *
                * */
                if(rs.code == 200){
                    return {
                        "code" : rs.code,
                        "msg" : rs.msg,
                        "count" : rs.data.total,
                        "data" : rs.data.data
                    }
                }else{
                    layer.msg(rs.msg);
                }
            },
            response : {
                statusCode : 200  //覆写了layui的正确时的响应码  从  0 改为了200
            }
        };
        let tabIns = table.render(tabOpt);
        //2. 点击查询按钮搜素功能
        $("#searchBtn").click(function (){
            let name  = $("#name").val();
            let phone  = $("#phone").val();
            let company  = $("#company").val();
            let userId  = $("#userId").val();
            tabIns.reload({
                where:{
                    "name":name,
                    "phone":phone,
                    "company":company,
                    "userId":userId
                }
            });

        });
        /* **************************************************************   */
        /* 渲染业务员 */
        /**
         * 初始化下拉框
         * @param select  需要初始化的下拉框
         * @param url  下拉框中的数据接口地址
         */
        function initSelect(select,url){
            //获取select dom
            let selectDom = $("#"+select);
            $.get(cxt+"/"+url,function (rs) {
                if(rs.code ==200){
                    let  data = rs.data;
                    let options = "";
                    for (let s of data) {
                        let userId = s.id;
                        let realname = s.realname;
                        options = options + "<option value='"+userId+"'>"+realname+"</option>";
                    }
                    selectDom.append(options);//将option追加到select下拉框中
                    //重新渲染下拉框
                    form.render("select");
                }
            })
        }
        initSelect("userId","user.do?service=allSalesman");
        /*****************************************************************************/
        //头工具栏事件
        table.on("toolbar(dataTableFilter)",function (d){
            let event = d.event;
            if(event == "add"){//新增操作
                add();
            }else if(event == "setSalesman"){
                setSalesman();
            }
        })

        let layerOpt = {
            title:"编辑",
            type:1,
            content:$("#editTpl").html(),
            area:['350px','450px'],
            offset:"t",
            btn:['确认','取消'],
            btnAlign:'c',
            success:function (layero,index) {
                form.render();
                //为表单绑定提交事件
                form.on("submit(subBtnFilter)",function (d) {
                    let formData = d.field;
                    formData.service = "add";
                    //使用ajax提交数据
                    $.post(cxt+"/customer.do",formData,function (rs) {
                        if(rs.code != 200){
                            layer.msg(rs.msg);
                            return false;
                        }
                        //提交成功  1. 关闭弹层   2. 刷新表格数据
                        layer.close(index);
                        //刷新表格数据
                        $("#searchBtn").click();
                    })
                    return false;//阻止表单的默认提交行为
                })


            },
            yes:function (index,layero) {
                $("#subBtn").click();//使用程序触发提交按钮的点击事件
            }
        };
        /**
         * 具体的新增方法
          */
        function add() {
            layer.open(layerOpt);
            
        }
        /**
         * 批量修改客户的业务员ID
         */
        function setSalesman(){
            //1. 获取需要修改的客户ID
            //2. 获取新的业务员
            let datas = table.checkStatus("dataTableId");
            console.log(datas);
            let  data = datas.data;
            //存储所有需要修改的客户的ID
            let customerIds = new Array();
            if(data.length == 0 ){
                layer.msg("请先选中客户");
                return false;
            }
            for (let  c of data) {
                customerIds.push("customerId="+c.id);//[customerId=1,customerId=2]
            }
            //弹出层 显示所有的业务员
            let opt = {
                title:"编辑",
                type:1,
                content:$("#allSalesmanTpl").html(),
                area:['350px','450px'],
                offset:"t",
                btn:['确认','取消'],
                btnAlign:'c',
                success:function (layero,index) {
                    //渲染下拉框
                    initSelect("salesmanId","user.do?service=allSalesman");
                    form.render();
                    //为表单绑定提交事件
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;
                        formData.service = "setUserId";
                        let customerId = customerIds.join("&");
                        console.log(customerId);
                        //使用ajax提交数据
                        $.post(cxt+"/customer.do?"+customerId,formData,function (rs) {
                            if(rs.code != 200){
                                layer.msg(rs.msg);
                                return false;
                            }
                            //提交成功  1. 关闭弹层   2. 刷新表格数据
                            layer.close(index);
                            //刷新表格数据
                            $("#searchBtn").click();
                        })
                        return false;//阻止表单的默认提交行为
                    })


                },
                yes:function (index,layero) {
                    $("#subBtn").click();//使用程序触发提交按钮的点击事件
                }
            };
            layer.open(opt);

        }


        /**********************************************************************/
        /*行工具栏监听事件*/
        table.on("tool(dataTableFilter)",function (d){
            let  event = d.event;
            let rowData = d.data;
            if(event == "edit"){
                edit(rowData);
            }else if(event == "del"){
                del(rowData);
            }else if(event == "visit"){
                visit(rowData);
            }
        });

        /**
         * 修改客户信息
         * @param rowData
         */
        function edit(rowData){
            //复制弹层参数
            let editOpt = {};
            Object.assign(editOpt,layerOpt);
            editOpt.success = function (layero,index) {
                //为表单赋值
                //渲染表单
                form.val("editFormFilter",rowData);
                form.render();//渲染表单
                //表单的提交
                //为表单绑定提交事件
                form.on("submit(subBtnFilter)",function (d) {
                    let formData = d.field;
                    formData.id = rowData.id;//客户ID
                    formData.service = "update";
                    //使用ajax提交数据
                    $.post(cxt+"/customer.do",formData,function (rs) {
                        if(rs.code != 200){
                            layer.msg(rs.msg);
                            return false;
                        }
                        //提交成功  1. 关闭弹层   2. 刷新表格数据
                        layer.close(index);
                        //刷新表格数据
                        $("#searchBtn").click();
                    })
                    return false;//阻止表单的默认提交行为
                })

            }
            //弹出一个层
            layer.open(editOpt);
        }

        /**
         * 删除客户信息
         * @param rowData
         */
        function del(rowData) {
            layer.confirm("确定要删除吗?",function (index) {
                $.get(cxt+"/customer.do?service=delete&id="+rowData.id,function (rs) {
                    layer.msg(rs.msg);
                    layer.close(index);
                    $("#searchBtn").click();
                })
            })
        }


        /**
         * 新增拜访记录
         * @param rowData
         */
        function visit(rowData){
            let opt = {
                title:"新增记录",
                type:1,
                content:$("#visitTpl").html(),
                area:['350px','450px'],
                offset:"t",
                btn:['确认','取消'],
                btnAlign:'c',
                success:function (layero,index) {
                    //为表单赋值
                    form.val("visitFormFilter",rowData);
                    //初始化拜访时间组件
                    laydate.render({
                        elem:"#visitTime"
                    })
                    //表单的提交监听
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;
                        formData.service = "add";
                        //使用ajax提交数据
                        $.post(cxt+"/log.do",formData,function (rs) {
                            if(rs.code != 200){
                                layer.msg(rs.msg);
                                return false;
                            }
                            //提交成功  1. 关闭弹层   2. 刷新表格数据
                            layer.close(index);
                            //刷新表格数据
                            $("#searchBtn").click();
                        })
                        return false;//阻止表单的默认提交行为
                    })
                },
                yes:function (index,layero) {
                    $("#subBtn").click();//使用程序触发提交按钮的点击事件
                }
            };
            layer.open(opt);
        }

    })
</script>
</body>
</html>
